import React from 'react'
import { connect } from 'dva'
import { Page } from 'components'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import moment from 'moment'
import { contractOrderType, logisticsCancelStatus } from 'utils/enumConfig'
import ContractDetailModal from './ContractDetailModal'
import LwjTable from 'components/LwjTable/LwjTable'
import { Spin, Divider } from 'antd'
import OuterLogisticsModal from './OuterLogisticsModal'
import lodash from 'lodash'

const ContractInProduction = ({location, dispatch, contractInProduction, loading}) => {
  const {
    items,
    isExpand,
    pagination,
    currentContractDetail,
    isShowContractDetailModal,
    logisticsDetailModalVisible,
    currentLogisticsDetail,
    logisticsSummaries,
    installationSummaries,
    spinLoading,
    isHashProduction,
    outerLogistics,
    outerLogisticsModalVisible,
    logisticCompanys,
    filterLogisticCompanys
  } = contractInProduction

  const breadcrumbList = [
    {
      title: '订单管理'
    }, {
      title: '生产物流'
    }
  ]

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'contractNum',
        title: '合同号'
      }, {
        type: 'input',
        id: 'sourceOrderNum',
        title: '第三方单号'
      }, {
        type: 'select',
        id: 'contractOrderType',
        title: '合同类型',
        options: [
          {
            value: '',
            name: '全部'
          }, {
            value: 'CUSTOMIZE',
            name: '定制'
          }, {
            value: 'END',
            name: '成品'
          }
        ]
      }, {
        type: 'select',
        id: 'productType',
        title: '产品类型',
        options: [
          {
            value: '',
            name: '全部'
          }, {
            value: 'CUPBOARD',
            name: '橱柜'
          }, {
            value: 'WARDROBE',
            name: '衣柜'
          }, {
            value: 'END',
            name: '成品'
          }
        ]
      },{
        type: 'select',
        id: 'companyCode',
        title: '物流公司',
        options: filterLogisticCompanys,
        defaultValue: ''
      }, {
        type: 'input',
        id: 'logisticNumList',
        title: '物流单号'
      }, {
        type: 'dateRule',
        id: 'createTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '创建时间'
      }
    ],
    onFilterChange (value) {
      let params = lodash.cloneDeep(value);
      if(value.logisticNumList){
        params.logisticNumList = [];
        params.logisticNumList.push(value.logisticNumList)
      }
      dispatch({
        type: 'contractInProduction/query',
        payload: {
          ...params
        }
      })
    },
    isExpand,
    noExpand () {
      dispatch({type: 'contractInProduction/unExpandFilter', payload: {}})
    },
    expand () {
      dispatch({type: 'contractInProduction/expandFilter', payload: {}})
    }
  }

  // 列表相关
  const listProps = {
    dataSource: items,
    loading: loading.effects['contractInProduction/query'],
    pagination,
    pageChangeAction: 'contractInProduction/query',
    dispatch,
    location
  }

  const contractOrderColumns = [
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum'
    },{
      title: '第三方单号',
      dataIndex: 'sourceOrderNum',
      key: 'sourceOrderNum'
    }, {
      title: '客户信息',
      dataIndex: 'customerInfo',
      key: 'customerInfo',
      render: (text, record, index) => (record.customerName + ' / ' + record.customerPhoneNum)
    }, {
      title: '合同类型',
      dataIndex: 'contractOrderType',
      key: 'contractOrderType',
      render: (text, record, index) => (contractOrderType[record.contractOrderType])
    }, {
      title: '门店',
      dataIndex: 'salesDistributorName',
      key: 'salesDistributorName'
    }, {
      title: '合同创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record, index) => (moment(record.createTime).format('YYYY-MM-DD HH:mm:ss'))
    }, {
      title: '合同状态',
      dataIndex: 'logisticsStatus',
      key: 'logisticsStatus'
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      render: (text, record, index) => (
        <span>
          <a onClick={() => onShowDetail(record)}>查看</a>
          <Divider type="vertical" />
          <a onClick={() => onShowEdit(record)}>+物流单号</a>
        </span>
      )
    }
  ]

  // 合同详情 props
  const contractDetailModalProps = {
    title: '合同详情',
    visible: isShowContractDetailModal,
    destroyOnClose: true,
    width: 1000,
    currentContractDetail,
    currentLogisticsDetail,
    footer: null,
    onCancel (record) {
      dispatch({type: 'contractInProduction/hideContractDetailModal', payload: {}})
      dispatch({type: 'contractInProduction/detailSuccess', payload: {installationSummaries: {}}})
    },
    dispatch,
    logisticsDetailModalVisible,
    logisticsSummaries,
    installationSummaries,
    spinLoading,
    isHashProduction:isHashProduction
  }
  /**
   * 查看详情
   * @param {*} record
   */
  const onShowDetail = (record) => {
    dispatch({
      type: 'contractInProduction/setSpinLoading',
      payload: {
        spinLoading: true
      }
    })
    console.info(!record.logisticsOrderStatuses.isNullException)
    dispatch({
      type: 'contractInProduction/setIsHashProduction',
      payload: !_.isArray(record.logisticsOrderStatuses)?false:!record.logisticsOrderStatuses[0].isNullException
    })
    dispatch({
      type: 'contractInProduction/onShowDetail',
      payload: {
        contractOrderId: record.id,
        salesOrderId: record.salesOrderId
      }
    })
  }

  //编辑外部物流单号
  const onShowEdit = (record) => {
    dispatch({
      type: 'contractInProduction/setOuterLogistics',
      outerLogistics: record
    })
    dispatch({
      type: 'contractInProduction/toggleOuterLogisticsVisible',
      outerLogisticsModalVisible: true
    })
  }

  const outerLogisticsModalProps = {
    dispatch,
    visible: outerLogisticsModalVisible,
    item: lodash.cloneDeep(outerLogistics),
    logisticCompanys,
    loading    
  }

  return (
    <PageHeaderLayout title="生产物流" breadcrumbList={breadcrumbList}>
      <Spin spinning={spinLoading}>
        <Page inner>
          <ContractDetailModal {...contractDetailModalProps}/>
          {outerLogisticsModalVisible ? <OuterLogisticsModal {...outerLogisticsModalProps}/> : null}
          <OrderFilterUnExpand {...filterProps}/>
          <LwjTable {...listProps} columns={contractOrderColumns}/>
        </Page>
      </Spin>
    </PageHeaderLayout>
  )
}

export default connect(({contractInProduction, loading}) => ({contractInProduction, loading}))(ContractInProduction)
